<template>
  <recycle-scroller class="virtual-list" :buffer="1000" :item-size="24"
    key-field="id" :items="tableData">
    <template v-slot="{ item, index }">
      <div class="list-item" :key="index">
        <span>{{ item.id }}</span>
        <span>{{ item.name }}</span>
      </div>
    </template>
  </recycle-scroller>
</template>
<script>
export default {
  data () {
    return {
      tableData: []
    }
  },
  created () {
    // for (let i = 0; i < 100000; i++) {
    //   this.tableData.push({ id: i, name: Math.random() })
    // }
  }

}
</script>
<style scoped>
.virtual-list {
  padding-left: 32px;
  border: 1px solid red;
  width: 300px;
  height: 400px;
}
.list-item {
  height: 24px;
  line-height: 24px;
}
</style>
